<template>
  <n-button @click="openAddStudents" type="primary">新增学生</n-button>
  <!--添加学生模态框-->
  <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      preset="dialog"
      :title="state.type==='add'?'新增学生':'修改学生'"
  >

    <!--      -->
    <n-form
        ref="formRef"
        :model="newStudent"
        :rules="rules"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
        size="medium"
        :style="{
                    maxWidth: '640px'
                }"
    >
      <n-form-item label="账号: " path="account">
        <n-input v-model:value="newStudent.account" type="text" placeholder="账号"/>
      </n-form-item>
      <n-form-item label="密码: " path="password">
        <n-input v-model:value="newStudent.password" type="text" placeholder="密码"/>
      </n-form-item>
      <n-form-item label="姓名: " path="name">
        <n-input v-model:value="newStudent.name" type="text" placeholder="姓名"/>
      </n-form-item>
      <n-form-item label="学号: " path="student_id">
        <n-input v-model:value="newStudent.student_id" type="text" placeholder="学号"/>
      </n-form-item>
      <n-form-item label="性别: " path="gender">
        <n-radio-group v-model:value="newStudent.gender" name="radioGroup">
          <n-space>
            <n-radio v-for="gender in genders" :key="gender.value" :value="gender.value">
              {{ gender.label }}
            </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="班级: " path="student_class_id">
        <n-select v-model:value="newStudent.student_class_id" :options="useAdmin.class['enable']"/>
      </n-form-item>
      <n-form-item label="手机号: " path="phone">
        <n-input v-model:value="newStudent.phone" type="text" placeholder="手机号"/>
      </n-form-item>

    </n-form>

    <n-button @click="onNegativeClick">
      取消
    </n-button>
    <add-student-batch @handleFinish="handleFinish"/>
    <n-button type="primary" @click="onPositiveClick">
      确定
    </n-button>
  </n-modal>
</template>

<script setup>

import {NButton} from "naive-ui";
import {useAdminStore} from "@/stores/admin";
import workApi from "@/http/workApi";
import {useAppStore} from "@/stores/app";
import {useUserStore} from "@/stores/user";
import AddStudentBatch from "@/components/admin/新建模态框/AddStudentBatch.vue";

const useAdmin = useAdminStore()
const app = useAppStore()
const user = useUserStore()
// 模态框展示
const showModal = ref(false)

// 状态  默认为新增学生
const state = reactive({
  type: 'add',
  apiMethod: 'post',
})

// 性别选项
let genders = [
  {
    value: '男',
    label: '男',
  },
  {
    value: '女',
    label: '女',
  },
  {
    value: '未知',
    label: '未知',
  }
]

// 新建学生信息
let newStudent = ref({
  account: "",
  password: "123456",
  name: "",
  student_id: "",
  gender: "男",
  student_class_id: null,
  phone: ""
})
const formRef = ref(null)
// 验证规则
const rules = {
  account: {
    required: true,
    trigger: ['blur'],
    message: '未填'
  },
  password: {
    required: false,
    trigger: ['blur'],
    message: '未填'
  },
  name: {
    required: true,
    trigger: ['blur'],
    message: '未填'
  },
  student_id: {
    required: true,
    trigger: ['blur'],
    message: '未填'
  },
  gender: {
    required: false,
    trigger: ['blur'],
    message: '未填'
  },
  student_class_id: {
    required: true,
    type:"number",
    trigger: ['blur'],
    message: '未填'
  },
  phone: {
    required: false,
    trigger: ['blur'],
    message: '未填'
  },
}
// 添加学生
let onPositiveClick = () => {
  // 验证
  formRef.value?.validate((errors) => {
    if (!errors) {
      const url = (state.type === 'add' ? 'register' : 'admin') + '/student'
      workApi({
        method: state.apiMethod,
        url: url,
        data: newStudent.value
      }).then(() => {
        useAdmin.setStudents()
        onNegativeClick()
      });
    } else {
      window.$message.error('好像没有填好, 检查一下吧')
    }
  })

};
let onNegativeClick = () => { // 取消
  showModal.value = false
  newStudent.value.account = ''
  newStudent.value.password = '123456'
  newStudent.value.name = ''
  newStudent.value.student_id = ''
  newStudent.value.gender = '男'
  newStudent.value.student_class_id = null
  newStudent.value.phone = ''
}
// 批量添加新学生后的回调函数
let handleFinish = () => {
  showModal.value = false
}
let openAddStudents = () => {
  state.apiMethod = 'post'
  state.type = 'add'
  showModal.value = true
}
let openModifiedStudent = (data) => {
  state.apiMethod = 'put'
  state.type = 'modified'
  newStudent.value = {...data}
  delete newStudent.value.student_class
  console.log(newStudent)
  newStudent.value.password = '123456'
  showModal.value = true
}
defineExpose({
  openModifiedStudent
})
</script>

<style scoped lang="less">
.n-button {
  margin: 15px;
}
</style>